'use client';
import { useState } from 'react';
import {
  PhoneIcon,
  EnvelopeIcon,
  MapPinIcon,
  BuildingOfficeIcon,
} from '@heroicons/react/24/outline';

export default function Contact() {
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    company: '',
    message: '',
  });
  const [status, setStatus] = useState<{
    type: 'success' | 'error' | null;
    message: string;
  }>({ type: null, message: '' });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setStatus({ type: null, message: '' });

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || '提交失败');
      }

      setStatus({
        type: 'success',
        message: data.message,
      });

      // 清空表单
      setFormData({
        name: '',
        phone: '',
        email: '',
        company: '',
        message: '',
      });
    } catch (error) {
      setStatus({
        type: 'error',
        message:
          error instanceof Error ? error.message : '提交失败，请稍后重试',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const contactInfo = [
    {
      icon: PhoneIcon,
      title: '电话咨询',
      items: [
        '李先生：13510099385',
        '黄小姐：13510969489',
        '电话：1986248686',
        // '座机：075527631851',
      ],
    },
    {
      icon: BuildingOfficeIcon,
      title: '工厂地址',
      items: ['东莞市黄江镇长社区清龙路127号'],
    },
    {
      icon: BuildingOfficeIcon,
      title: '公司地址',
      items: ['深圳市宝安区石岩街道北环路上屋林场'],
    },
    {
      icon: EnvelopeIcon,
      title: '在线咨询',
      items: ['邮箱：S.z-fq@163.com'],
    },
  ];

  return (
    <main className="min-h-screen">
      {/* Hero Section */}
      <section className="relative h-[300px] bg-gradient-to-r from-green-600 to-green-800">
        <div className="absolute inset-0 bg-black/30" />
        <div className="container mx-auto px-4 h-full flex items-center justify-center relative z-10">
          <div className="text-center text-white">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">联系我们</h1>
            <p className="text-xl">
              期待与您的合作，为您提供专业的包装解决方案
            </p>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {/* Contact Info */}
            <div className="space-y-8">
              {contactInfo.map((info, index) => {
                const Icon = info.icon;
                return (
                  <div
                    key={index}
                    className="bg-white p-6 rounded-lg shadow-md"
                  >
                    <div className="flex items-center mb-4">
                      <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
                        <Icon className="w-6 h-6 text-green-600" />
                      </div>
                      <h3 className="text-xl font-semibold">{info.title}</h3>
                    </div>
                    <ul className="space-y-2">
                      {info.items.map((item, itemIndex) => (
                        <li key={itemIndex} className="text-gray-600">
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                );
              })}
            </div>
            {/* Map Section */}
            <section className="py-16 bg-gray-50">
              <div className="container mx-auto px-4">
                <h2 className="text-2xl font-bold mb-8 text-center">地理位置</h2>
                <div className="aspect-[16/9] w-full max-w-4xl mx-auto">
                  <iframe
                    src="https://map.baidu.com/poi/%E4%B8%9C%E8%8E%9E%E5%B8%82%E9%BB%84%E6%B1%9F%E9%95%BF%E7%A4%BE%E5%8C%BA%E6%B8%85%E9%BE%99%E8%B7%AF127%E5%8F%B7/@12624535.75,2636998.27,19z"
                    width="100%"
                    height="100%"
                    style={{ border: 0 }}
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    className="rounded-lg shadow-lg"
                  />
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>

    </main>
  );
}
